<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
    <div class="layui-btn-group">
        <button class="layui-btn" id="alert_btn">alert普通信息弹框</button>
        <button class="layui-btn" id="confirm_btn">confirm询问框</button>
        <button class="layui-btn" id="prompt_btn">prompt输入层</button>
        <button class="layui-btn" id="tab_btn">tab选项卡层</button>
        <button class="layui-btn" id="photos_btn">photos图片层</button>
    </div>

    <script>
        layui.use(["layer"], function () {
            var layer = layui.layer;
            var $ = layui.jquery;

            $("#alert_btn").click(function () {
                layer.alert("有了回调", function (index) {
                    alert("ok");
                    layer.close(index);
                })
            });

            $("#confirm_btn").click(function () {
                layer.confirm("你真的要退出吗？", function (index) {
                    // 点击确定才会产生回调
                    alert(index + "ok");
                    layer.close(index);
                });
            });

            $("#prompt_btn").click(function () {
                // layer.prompt(function (value, index, item) {
                //     alert(value);
                //     layer.close(index);
                // })
                layer.prompt({
                    formType: 2,
                    value: '初始值',
                    title: '请输入值',
                    area: ['800px', '350px']
                }, function (value, index, item) {
                    console.log(value);       // 获得文本中的值
                    console.log(item);        // 获得DOM对象
                    layer.close(index);       // 关闭弹出层
                });
            });

            $("#tab_btn").click(function () {
                layer.tab({
                    area: ['600px', '300px'],
                    tab: [
                        { title: 'Tab1', content: '内容1' },
                        { title: 'Tab2', content: '内容2' },
                        { title: 'Tab3', content: '内容3' },
                    ]
                })
            })

            $("#photos_btn").click(function () {
                $.getJSON("static/photo.json", function (json) {
                    layer.photos({
                        photos: json,
                        anim: 5
                    })
                })
            })
        });
    </script>
</body>
</html>